<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" plain @click="onStudioAdd">创建</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="房间号" align="center" prop="roomId" />
			<el-table-column label="直播卡片封面" align="center" prop="thumb">
				<template #default="scope">
					<el-image :src="scope.row.shareImg_image" fit="scale-down" style="width: 60px; height: 60px" />
				</template>
			</el-table-column>
			<el-table-column label="直播间名称" align="center" prop="name" />
			<el-table-column label="主播昵称" align="center" prop="anchorName" />
			<el-table-column label="状态" align="center" prop="live_status" :formatter="formatterLiveStatus" />
			<el-table-column label="开始时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.startTime) }}</template>
			</el-table-column>
			<el-table-column label="结束时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.endTime) }}</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button v-if="!scope.row.live_status || Number(scope.row.live_status) == 102" @click="onStudioEdit(scope.row)" type="text">修改</el-button>
					<el-button v-if="!scope.row.live_status || Number(scope.row.live_status) == 102 || Number(scope.row.live_status) == 101" @click="onStudioGoodAdd(scope.row)" type="text">导入商品</el-button>
						<span class="mr10" />
						<el-dropdown trigger="click">
						<el-button type="text">更多</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="onStudioDelete(scope.row)">删除</el-dropdown-item>
							</el-dropdown-menu>
							<el-dropdown-menu>
								<el-dropdown-item @click="onStudioView(scope.row)">查看</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<live-studio-add-dialog ref="liveStudioAddRef" />
		<live-studio-edit-dialog ref="liveStudioEditRef" />
		<live-studio-view-dialog ref="liveStudioViewRef" />
		<bulk-import-good-dialog ref="bulkImportGoodRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { livesApi } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

import LiveStudioAddDialog from './dialog/LiveStudioAddDialog.vue';
import LiveStudioEditDialog from './dialog/LiveStudioEditDialog.vue';
import LiveStudioViewDialog from './dialog/LiveStudioViewDialog.vue';
import BulkImportGoodDialog from './dialog/BulkImportGoodDialog.vue';

const LivesApi = livesApi()
export default {
	name: 'liveStudio',
	components: { LiveStudioAddDialog, LiveStudioEditDialog, LiveStudioViewDialog, BulkImportGoodDialog },
	setup() {
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const queryFormRef = ref(null);
		const liveStudioAddRef = ref(null);
		const liveStudioEditRef = ref(null);
		const liveStudioViewRef = ref(null);
		const bulkImportGoodRef = ref(null);

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 创建直播间
		const onStudioAdd = () => {
			(liveStudioAddRef.value as any)?.openDialog({}, () => getList());
		};
		// 修改直播间
		const onStudioEdit = (row: any) => {
			(liveStudioEditRef.value as any)?.openDialog(row, () => getList());
		};
		// 批量导入商品
		const onStudioGoodAdd = (row: any) => {
			(bulkImportGoodRef.value as any)?.openDialog({ id: row.id }, () => getList());
		};
		// 删除直播间
		const onStudioDelete = (row: any) => {
			ElMessageBox.confirm(`是否确认删除直播ID为${row.id}的数据项？`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return LivesApi.deleteLives({ id: row.id });
				})
				.then(() => {
					ElMessage.success('删除成功');
					getList();
				})
				.catch(() => {});
		};
		// 查看直播间
		const onStudioView = (row:any) => {
			(liveStudioViewRef.value as any)?.openDialog(row, () => getList());
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_livesList(state.queryParams);
		};

		// 直播状态字典
		const formatterLiveStatus = (row: any) => {
			switch (Number(row.live_status)) {
				case 101:
					return '直播中';
				case 102:
					return '未开始';
				case 103:
					return '已结束';
				case 104:
					return '禁播';
				case 105:
					return '暂停';
				case 106:
					return '异常';
				case 107:
					return '已过期';
				default:
					return '未知错误';
			}
		};

		/********** 网络事件 **********/
		// 直播间列表
		const _livesList = (params: object = {}) => {
			LivesApi.livesList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.info.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			queryFormRef,
			liveStudioAddRef,
			liveStudioEditRef,
			bulkImportGoodRef,
			liveStudioViewRef,
			onQuery,
			onResetQuery,
			onStudioAdd,
			onStudioEdit,
			onStudioGoodAdd,
			onStudioDelete,
			onStudioView,
			getList,
			formatterLiveStatus,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
